이미지 최적화가 필요한 이유
웹페이지 로드 시간은 사용자가 페이지에서 이탈하지 않도록 하는 가장 큰 요소이다. 웹페이지 로드 시간을 줄이기 위한 최적화 기법에는 여러 가지가 있는데 그중에서 가장 기본적인 이미지 최적화를 해 볼 것이다.
1. 적절한 이미지 사이즈 사용하기
기본적으로 페이지에 표시되는 사이즈보다 더 큰 사이즈의 이미지를 사용하는것은 좋지 않다. 이로 인한 바이트 낭비가 발생하고 이는 페이지 로드 시간에 영향을 끼치기 때문이다.
그렇다면 어떻게 이미지 사이즈를 줄일 수 있을까?
로컬에 저장된 이미지라면 다양한 이미지 압축 사이트를 이용해서 압축된 이미지를 저장할 수 있다.
이미지를 압축할 때에는 화면에 표시되는 크기의 2배정도로 하는것이 좋은데, 그 이유는 요즘 사용되는 디스플레이들은 같은 공간에 더 많은 픽셀을 그릴 수 있기 때문이다.
이렇게 사이트를 통해 압축하는 것은 이미지가 로컬에 있으면 상관없지만, 이미지를 API에서 불러오는 경우에는 어떻게 해야 할까?
바로 이미지 CDN을 사용하는 방법이 있다.
CDN(Content Delivery Network) : 물리적 한계를 극복하기 위해 사용자와 가까운 것에 콘텐츠 서버를 두는 기술
간단하게 설명하자면 오리지널 서버의 데이터를 다른 곳에 미리 복사해 두고, 사용자가 이미지를 다운로드 하려고 할 때 오리지널 서버가 아닌 가까운 서버에서 다운로드 하도록 하는 기술이다.
또한 이미지 CDN은 이미지를 사용자에게 보내기 전에 특정한 형태로 가공하는 기능까지 있는데 이 기능을 이용해서 이미지를 최적화 할 수 있다.
CDN 주소는 크롬 개발자 도구 -> 네트워크 탭에 들어가서 확인할 수 있는데, 이 주소를 이용해서 요청을 보낼 때 이미지 형태를 가공할 수 있다. (CDN마다 형식이 조금씩 다름)
2. 차세대 이미지 포맷 사용하기
차세대 이미지 포맷인 .webp 를 사용해서도 이미지를 최적화 할 수 있다.
webp : 구글에서 만든 차세대 이미지 포맷, web을 위해서 만들어진 포맷이다.
특징으로는 무손실 압축과 손실 압축을 둘다 지원하는데 두 방식에 따른 장단점이 존재한다.
| 무손실 압축 | 손실 압축 | |
|---|---|---|
| 장점 | 품질이 저하되지 않음 | 압축률이 높음 |
| 단점 | 압축률이 비교적 낮음 | 품질 저하 발생 |
이와 같이 .webp 를 사용하면 이미지 용량을 줄일 수 있다. 하지만 아직은 webp 를 지원하지 않는 브라우저도 있기 때문에 주의가 필요하다.
3. Lazy Loading 사용하기
Lazy Loading 이란 스크롤해야만 보이는 이미지들(현재 화면에 보이지 않는 이미지)의 로딩을 나중에 하는 기술이다.
주의해야 할 점은 첫 화면에 나타나는 이미지에 Lazy Loading 을 적용한다면 성능 저하가 발생할 수 있다.
React에서는 Image 컴포넌트를 사용하면 기본적으로 Lazy Loading 이 적용되어 있다.
마무리
이미지를 최적화하는 3가지 방법을 공부해 보았는데 이미지를 최적화 하는 방법은 이 외에도 정말 여러가지가 있다. 이 방법들을 공부하면서 아직 공부해야 할 것은 산더미만큼 남았다는것을 알았다... 더 열심히 공부해서 진짜 개발자가 될 수 있도록 노력해야겠다.